<template>
  <com-paging>
    <view class="container">
      <view class="back" @click="toPage()">
        <view class="iconfont icon-forward"></view>
        <view class="text">返回</view>
      </view>
      <view class="inputs">
        <com-input v-for="item in inputList" :="item" v-model="state.input[item.type!]">
        </com-input>
      </view>
      <view class="numberboxs">
        <com-numberbox v-for="item in numberboxList" v-model="state.numberbox[item.name]"
          :="item.props"></com-numberbox>
      </view>
    </view>
  </com-paging>
</template>

<script lang="ts" setup>
import { InputNS, NumberboxNS } from '@/components'
import { reactive } from 'vue'
import { toPage } from '@/utils'

const inputList: InputNS.Props[] = [
  {
    type: 'textarea',
    placeholder: 'lock o mas',
    nativeProps: { maxlength: 50000 },
    showWordLimit: true
  },
  {
    type: 'code',
    modelValue: 123,
  },
  {
    type: 'password',
  },
  {
    type: 'email',
  },
  {
    type: 'phone',
    disabled: true
  },
]
const numberboxList = <{ name: string, props: NumberboxNS.Props }[]>[
  {
    name: 'a', props: { controls: false, step: 5, stepStrictly: true }
  },
  {
    name: 'b', props: { step: 0.05 }
  },
  {
    name: 'c', props: { disabled: true }
  },
  {
    name: 'c', props: { controls: false, disabled: true }
  }
]
const state = reactive({
  input: <Record<typeof inputList[number]['type'] & {}, string>>{},
  numberbox: <Record<string, number>>{},
})
</script>

<style scoped lang="scss" src="./index.scss"></style>